<!-- 方案配置 -->
<template>
    <div class="box">
        <el-row :gutter="20">
            <el-col :span="10">
                <el-card class="box-card">
                    <div class="title_box">
                        <div>计费方案</div>
                        <div>
                            <el-button type="text" icon="el-icon-plus" @click="add">新增</el-button>
                            <el-button type="text" icon="el-icon-edit" @click="edit" :disabled="startStatus">编辑</el-button>
                            <el-button type="text" icon="el-icon-delete" @click="delet"
                                :disabled="startStatus">删除</el-button>
                            <el-button type="text" icon="el-icon-video-play" @click='startPlay'
                                :disabled="startStatus">启用</el-button>
                            <el-button type="text" icon="el-icon-tickets" :disabled="exportStatus"
                                @click="exportExcl">导出</el-button>
                        </div>
                    </div>
                    <div v-for="(item) in schemeList" :key="item.id" class="title_box_value"
                        :class="item.color ? 'title_box_value_color' : ''" @click="programmeChange(item)">
                        <i class="el-icon-s-help"></i>
                        <span>{{ item.schemeName }}</span>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="14">
                <el-card class="box-card">
                    <div class="title_box">
                        <div>方案信息</div>
                    </div>
                    <el-form :model="info1" ref="queryForm" size="small" :inline="true" label-width="130px">

                        <el-form-item label="方案名称" prop="schemeName">
                            <el-input v-model="info1.schemeName" disabled clearable style="width: 200px" />
                        </el-form-item>
                        <el-form-item label="价格类型" prop="priceType">
                            <el-select v-model="info1.priceType" filterable placeholder="请选类型" style="width:100%" disabled>
                                <el-option label="简单计价计费" value="SIMPLE"> </el-option>
                                <el-option label="月阶梯" value="MONTH"> </el-option>
                                <el-option label="年阶梯" value="YEAR"> </el-option>

                            </el-select>
                        </el-form-item>
                        <!-- <el-form-item label="表计类型" prop="status">
                            <el-input v-model="info1.userName" disabled clearable style="width: 200px" />
                        </el-form-item>
                        <el-form-item label="计量项" prop="userName">
                            <el-input v-model="info1.userName" clearable style="width: 200px" disabled />
                        </el-form-item>
                        <el-form-item label="区域权限" prop="status">
                            <el-input v-model="info1.userName" disabled clearable style="width: 200px" />
                        </el-form-item> -->
                        <el-form-item label="启用状态" prop="statusNmae">
                            <el-input v-model="info1.statusNmae" clearable style="width: 200px" disabled />
                        </el-form-item>
                        <el-form-item label="备注" prop="remark">
                            <el-input v-model="info1.remark" clearable style="width: 200px" disabled />
                        </el-form-item>

                    </el-form>
                </el-card>
                <el-card class="box-card">
                    <div class="title_box">
                        <div>计费详情</div>
                        <div>
                            <el-button type="text" icon="el-icon-plus" @click="childAdd" v-if="addStatus">新增</el-button>
                            <el-button type="text" icon="el-icon-edit" @click="childEdit"
                                :disabled="childStatus">编辑</el-button>
                            <!-- <el-button type="text" icon="el-icon-delete" @click="childDelet"
                                :disabled="childStatus">删除</el-button> -->
                        </div>
                    </div>
                    <el-table v-loading="loading" :data="userList" border @row-click="rowClick">
                        <el-table-column label="简单计价(元)" align="center" key="simplePrice" prop="simplePrice"
                            :show-overflow-tooltip="true" v-if="isSimple" />
                        <el-table-column label="阶梯价起" align="center" key="startingValue" prop="startingValue"
                            :show-overflow-tooltip="true" v-if="!isSimple" />
                        <el-table-column label="阶梯价止" align="center" key="endingValue" prop="endingValue"
                            :show-overflow-tooltip="true" v-if="!isSimple" />
                        <el-table-column label="阶梯价格(元)" align="center" key="tieredPrice" prop="tieredPrice"
                            :show-overflow-tooltip="true" v-if="!isSimple" />
<!--                        <el-table-column label="备注" align="center" key="remark" prop="remark"-->
<!--                            :show-overflow-tooltip="true" />-->
                    </el-table>
                    <pagination v-show="total > 0" :total="total" userListpriceType:page.sync="queryParams.pageNum"
                        :limit.sync="queryParams.pageSize" @pagination="getPlanList" />
                </el-card>
            </el-col>
        </el-row>
        <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body :close-on-click-modal="false">
            <el-form ref="form" :model="form" :rules="rules" label-width="120px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="方案名称" prop="schemeName" required>
                            <el-input v-model="form.schemeName" placeholder="请输入名称" maxlength="30" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="价格类型" prop="priceType" required>
                            <el-select v-model="form.priceType" filterable placeholder="请选择类型" style="width:100%">
                                <el-option label="简单计价计费" value="SIMPLE"> </el-option>
                                <el-option label="月阶梯" value="MONTH"> </el-option>
                                <el-option label="年阶梯" value="YEAR"> </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="年阶梯重置月份" prop="yearResetMonth" required>
                            <el-select v-model="form.yearResetMonth" filterable placeholder="请选择年阶梯重置月份" style="width:100%">
                                <el-option :label="item" :value="item" v-for="(item, index) in mounthList" :key="index">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="月阶梯重置日期" prop="monthResetDate" required>
                            <el-select v-model="form.monthResetDate" filterable placeholder="请选择月阶梯重置日期" style="width:100%">
                                <el-option :label="item" :value="item" v-for="(item, index) in dayList" :key="index">
                                </el-option>

                            </el-select>
                        </el-form-item>
                    </el-col>
                    <!-- <el-col :span="24">
                        <el-form-item label="计量项" prop="nickName">
                            <el-select v-model="form.cons_type" filterable placeholder="请选类型" style="width:100%">
                                <el-option label="简单计价计费" value="1"> </el-option>
                                <el-option label="月阶梯" value="2"> </el-option>
                                <el-option label="年阶梯" value="3"> </el-option>

                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="24">
                        <el-form-item label="区域权限" prop="nickName" required>
                            <el-cascader placeholder="试试搜索：指南" :options="options" filterable
                                style="width:100%"></el-cascader>
                        </el-form-item>
                    </el-col> -->
                    <el-col :span="24">
                        <el-form-item label="备注" prop="remark">
                            <el-input v-model="form.remark" placeholder="请输入备注" maxlength="30" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
        <!-- <el-dialog :title="title1" :visible.sync="open1" width="600px" append-to-body :close-on-click-modal="false">
            <el-form ref="form1" :model="form1" :rules="rules1" label-width="120px">
                <el-row>
                    <el-col :span="12" v-if="!isSimple">
                        <el-form-item label="阶梯价起" prop="startingValue">
                            <el-input v-model="form1.startingValue" placeholder="请输入阶梯价起" maxlength="30" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" v-if="!isSimple">
                        <el-form-item label="阶梯价止" prop="endingValue">
                            <el-input v-model="form1.endingValue" placeholder="请输入阶梯价止" maxlength="30" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" v-if="!isSimple">
                        <el-form-item label="阶梯价格(元)" prop="tieredPrice" required>
                            <el-input v-model="form1.tieredPrice" placeholder="请输入阶梯价格" maxlength="30" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" v-if="isSimple">
                        <el-form-item label="简单计价" prop="simplePrice" required>
                            <el-input v-model="form1.simplePrice" placeholder="请输入简单计价" maxlength="30" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="备注" prop="remark">
                            <el-input v-model="form1.remark" placeholder="请输入备注" maxlength="30" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="chuildSubmitForm">确 定</el-button>
                <el-button @click="cancel1">取 消</el-button>
            </div>
        </el-dialog> -->
        <el-dialog :title="title1" :visible.sync="open1" width="1000px" append-to-body :close-on-click-modal="false">
            <el-form ref="form1" :model="form1" label-width="120px">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="方案名称" prop="schemeName">
                            <el-input v-model="form1.schemeName" placeholder="请输入方案名称" maxlength="30" disabled />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24" v-if="isSimple">
                        <el-form-item label="简单计价" prop="simplePrice" required>
                            <el-input v-model="form1.simplePrice" placeholder="请输入简单计价" maxlength="30" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="24" v-if="!isSimple">
                        <el-form-item label="阶梯数据" prop="endingValue">
                            <el-table :data="tableData" style="width: 100%">
                                <el-table-column label="阶梯值起(m3)" width="180" align="center">
                                    <template slot-scope="scope">
                                        <el-input v-model="scope.row.startingValue" placeholder="请输入阶梯价起" maxlength="30"
                                            disabled />
                                    </template>
                                </el-table-column>
                                <el-table-column label="阶梯值止(m3)" width="180" align="center">
                                    <template slot-scope="scope">
                                        <el-input v-model="scope.row.endingValue" placeholder="请输入阶梯值止" maxlength="30"
                                            :disabled="scope.row.state" @change='priceChange($event, scope.row)' />
                                    </template>
                                </el-table-column>
                                <el-table-column label="价格(元)" width="180" align="center">
                                    <template slot-scope="scope">
                                        <el-input v-model="scope.row.tieredPrice" placeholder="请输入价格" maxlength="30" />
                                    </template>
                                </el-table-column>
                                <el-table-column>
                                    <template slot-scope="scope">
                                        <i class="el-icon-circle-plus" @click="handleAdd(scope.$index, scope.row)"
                                            v-if="scope.row.addState"
                                            style="font-size: 40px;color: rgb(233, 21, 21);margin-right:10px;cursor: pointer;"></i>
                                        <i class="el-icon-circle-plus" v-if="!scope.row.addState"
                                            style="font-size: 40px;color: rgb(198, 183, 183);margin-right:10px;"></i>
                                        <i class="el-icon-remove-outline" @click="handleDelete(scope.$index, scope.row)"
                                            v-if="scope.row.delState" style="font-size: 40px;cursor: pointer;"></i>
                                        <i class="el-icon-remove-outline" v-if="!scope.row.delState"
                                            style="font-size: 40px;color: #ccc"></i>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-form-item>
                    </el-col>
<!--                    <el-col :span="24">-->
<!--                        <el-form-item label="备注" prop="remark">-->
<!--                            <el-input v-model="form1.remark" placeholder="请输入备注" maxlength="30" />-->
<!--                        </el-form-item>-->
<!--                    </el-col>-->
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="chuildSubmitForm">确 定</el-button>
                <el-button @click="cancel1">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { planList, planInfo, planStart, addPlan, updatePlan, delConfig, exportPlan, planinfoList, planinfoInfo, planinfoEdit, addPlaninfo, getPriceList, planSmplyList } from '@/api/service/planlist.js'
export default {
    data() {
        return {
            userIds:'',
            exportStatus: true,
            addStatus: true,
            addState: true,
            delState: false,
            tableData: [{
                id: 0,
                startingValue: '0',
                endingValue: 'max',
                tieredPrice: '',
                state: true,
                addState: true,
                delState: false
            }],
            schemeList: [
                { name: '方案1', id: '1', color: false },
                { name: '方案2', id: '2', color: false },
                { name: '方案4', id: '4', color: false },
                { name: '方案5', id: '5', color: false },
            ],
            queryParams: {
                pageNum: 1,
                pageSize: 10,
            },
            options: [],
            loading: false,
            total: 0,
            userList: [],
            title: '新增',
            title1: '新增',
            open: false,
            open1: false,
            form: {
                schemeName: '',
                priceType: "",
                yearResetMonth: '1',
                monthResetDate: '1',
                remark: '',

            },
            form1: { schemeName: '', remark: '' },
            // 表单校验
            rules: {
                schemeName: [
                    { required: true, message: "方案名称不能为空", trigger: "blur" },
                ],
                priceType: [
                    { required: true, message: "价格类型不能为空", trigger: "change" },
                ],
                yearResetMonth: [
                    { required: true, message: "年阶梯重置月份不能为空", trigger: "change" },
                ],
                monthResetDate: [
                    { required: true, message: "月阶梯重置日期不能为空", trigger: "change" },
                ],
            },
            // 表单校验
            rules1: {
                userName: [
                    { required: true, message: "小区名称不能为空", trigger: "blur" },
                    {
                        min: 2,
                        max: 20,
                        message: "小区名称长度必须介于 2 和 20 之间",
                        trigger: "blur",
                    },
                ],
                nickName: [
                    { required: true, message: "小区昵称不能为空", trigger: "blur" },
                ],
            },
            info: {},
            info1: { detailJson: [] },
            info2: {},
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                userName: undefined,
                phonenumber: undefined,
                status: undefined,
                deptId: undefined,
            },
            startStatus: true,
            childStatus: true,
            isSimple: false,
            mounthList: [],
            dayList: [],
            name: '',
            listId:'',
            listType:'',
        }
    },
    watch: {
        schemeList: {
            deep: true,
            handler(val) {
                this.schemeList = val
            }
        },
        info: {
            deep: true,
            handler(val) {
                this.info = val
            }
        },
        info1: {
            deep: true,
            handler(val) {
                this.info1 = val
            }
        },
        info2: {
            deep: true,
            handler(val) {
                this.info2 = val
            }
        },
        userList: {
            deep: true,
            handler(val) {
                this.userLists = val
            }
        },
        tableData: {
            deep: true,
            handler(val) {
                this.tableData = val
            },
            immediate: true
        }
    },
    mounted() {
        this.getPlanList()
        this.mounthList = [...Array(12)].map((v, i) => i + 1)
        this.dayList = [...Array(28)].map((v, i) => i + 1)
    },
    methods: {
        priceChange(value, info) {
            console.log(value)
            console.log(info)
            this.tableData.map((res) => {
                console.log(typeof res.id, typeof info.id)
                if (res.id == info.id + 1) {
                    res.startingValue = value
                }
            })
        },
        handleAdd(index, row) {
            console.log(index, row);
            if (this.tableData.length > 0) {
                let obj = {
                    id: this.tableData.length,
                    startingValue: '',
                    endingValue: 'max',
                    tieredPrice: '',
                    state: false,
                    addState: true,
                    delState: true,
                }
                this.tableData.push(obj)
                this.tableData.map((res, index) => {
                    // 大于一条数据的处理
                    if (index === this.tableData.length - 1) {
                        res.addState = false
                        res.endingValue = 'max'
                        res.state = true
                    } else {
                        // 第一条数据的特殊处理
                        if (index === 0) {
                            res.endingValue = ''
                            res.state = false
                            res.startingValue = 0
                            res.delState = false
                        } else {
                            res.endingValue = ''
                            res.state = false
                            res.addState = true
                            res.delState = true
                        }

                    }
                })
                // let obg = this.tableData[this.tableData.length - 1]
                // console.log(obg, 222222)
                // obg.addState = false
                // obg.stop = 'max'
                // obg.state = true
                // this.tableData.splice(this.tableData.length - 1, 1, obg)
            } else {
                this.addState = true
                this.delState = false
            }


        },
        handleDelete(index, row) {
            console.log(index, row);
            if (this.tableData.length > 1) {
                this.tableData.map((res, index) => {
                    if (row.id == res.id) {
                        this.tableData.splice(index, 1)
                    }
                })
            } else {
                this.tableData.map((res) => {
                    res.endingValue = 'max'
                    res.state = true
                    res.addState = true
                    res.delState = false
                })
            }

        },
        // 方案详情行点击
        rowClick(row) {

            this.info2 = row
            console.log(row)
            this.name = row.schemeName

        },
        // 导出方案
        exportExcl() {
            exportPlan().then((res) => {
                this.$modal.msgSuccess("导出成功");
            })
        },
        // 启动方案
        startPlay() {
            planStart(this.info1.id).then((res) => {
                this.$modal.msgSuccess("启动成功");
                this.getPlanList()
            })
        },
        // 获取方案列表
        getPlanList() {

            planList(this.queryParams).then((res) => {
                this.schemeList = res.rows
            })
        },
        // 点击方案
        programmeChange(item) {
            

            this.userIds = item.id
            console.log(item, 3333)
            this.$set(this.form1, 'schemeName', item.schemeName)
            this.$set(this.form1, 'remark', item.remark)
            if (this.isSimple) {
                this.$set(this.form1, 'simplePrice', item.simplePrice)
            }
            this.name = item.schemeName
            this.exportStatus = false
            this.schemeList.map(async (res) => {
                if (res.id == item.id) {
                    res.color = true
                    this.info1 = res
                    if (res.status == '1') {
                        this.info1.statusNmae = '启用'
                        this.startStatus = true
                        this.childStatus = true
                    } else {
                        this.info1.statusNmae = '禁用'
                        this.startStatus = false
                        this.childStatus = false
                    }
                    this.userList =[]
                    this.listId = res.id
                    this.listType = res.priceType
                    if (res.priceType == 'SIMPLE') {
                        this.isSimple = true
                        const response = await planSmplyList(res.id)

                        if (response.code == 200) {
                            this.userList.push(response.data)
                            if (response.data.simplePrice) {
                                this.addStatus = false
                                if(res.status !== '1'){
                                    this.childStatus = false
                                }
                                
                            } else {
                                this.addStatus = true
                                this.addStatus = true
                            }
                        }

                    } else {
                        this.isSimple = false
                        const response = await getPriceList({ schemeId: res.id })
                        if (response.code == 200) {
                            this.userList = response.rows

                            if (response.rows.length > 0) {
                                this.addStatus = false
                                if(res.status !== '1'){
                                    this.childStatus = false
                                }
                            } else {
                                this.addStatus = true
                                this.addStatus = true
                            }
                        }
                    }

                } else {
                    res.color = false
                }
            })
        },
        // 新增弹框
        add() {
            this.form = {
                schemeName: '',
                priceType: "",
                yearResetMonth: '1',
                monthResetDate: '1',
                remark: '',
            }
            this.title = '新增'
            this.open = true
        },
        // 子新增弹框
        childAdd() {
            this.tableData = [
                {
                    id: 0,
                    startingValue: '0',
                    endingValue: 'max',
                    tieredPrice: '',
                    state: true,
                    addState: true,
                    delState: false
                }
            ]
            this.form1 = {}
            this.title1 = '新增'
            this.open1 = true
            console.log(this.name, 111)
            this.$set(this.form1, 'schemeName', this.name)
            if (this.info1.priceType == 'SIMPLE') {
                this.isSimple = true
            } else {
                this.isSimple = false
            }
        },
        // 弹框确定
        submitForm() {
            this.$refs["form"].validate((valid) => {
                if (valid) {
                    if (this.title == '编辑') {
                        updatePlan(this.form).then((res) => {
                            this.$modal.msgSuccess("修改成功");
                            this.open = false
                            this.getPlanList()
                        })
                    } else {
                        addPlan(this.form).then((res) => {
                            this.$modal.msgSuccess("新增成功");
                            this.open = false
                            this.getPlanList()
                            this.tableData = [{
                                id: 0,
                                startingValue: '0',
                                endingValue: 'max',
                                tieredPrice: '',
                                state: true,
                                addState: true,
                                delState: false
                            }]
                            this.form1 = { schemeName: '', remark: '' }
                        })
                    }
                }
            })


        },
        // 子弹框确定
        chuildSubmitForm() {
            let param = {}
            if (this.isSimple) {
                param = {
                    'id': this.info1.id,
                    'simplePrice': this.form1.simplePrice ? Number(this.form1.simplePrice) : "",
                    'remark': this.form1.remark ? this.form1.remark : '',
                }
                if(this.title1 == '新增'){
                    addPlaninfo(param).then((res) => {
                        this.$modal.msgSuccess("新增成功");
                        this.open1 = false
                    })
                }else{
                    planinfoEdit(param).then((res) => {
                        this.$modal.msgSuccess("修改成功");
                        this.open1 = false
                    })
                }
                planSmplyList(this.listId).then((res)=>{
                    if(res.code==200){
                        this.userList = []
                        this.userList.push(res.data)
                        if (res.data.simplePrice) {
                            this.addStatus = false
                            this.childStatus = false
                        } else {
                            this.addStatus = true
                            this.addStatus = true
                        }
                    }
                })
            } else {
                console.log(this.tableData, 888888888888)
                let list = []
                if (this.tableData.length > 0) {
                    this.tableData.map((res) => {
                        let obj = {
                            'startingValue': Number(res.startingValue),
                            'endingValue': res.endingValue ? Number(res.endingValue) : '',
                            'tieredPrice': Number(res.tieredPrice),
                            'remark': this.form1.remark ? this.form1.remark : '',
                            'id': res.id,
                            'state': res.state,
                            'addState': res.addState,
                            'delState': res.delState,
                        }
                        list.push(obj)
                    })
                }
                let data = {
                    id: this.info1.id,
                    detailJson: ''
                }
                data.detailJson = JSON.stringify(list)
                if(this.title1 == '新增'){
                    addPlaninfo(data).then((res) => {
                        this.$modal.msgSuccess("新增成功");
                        this.open1 = false
                    })
                }else{
                    planinfoEdit(data).then((res) => {
                        this.$modal.msgSuccess("修改成功");
                        this.open1 = false
                    })
                }
                getPriceList({ schemeId: this.listId }).then((res)=>{
                    if(res.code==200){
                        this.userList = []
                        this.userList = res.rows

                        if (res.rows.length > 0) {
                            this.addStatus = false
                            this.childStatus = false
                        } else {
                            this.addStatus = true
                            this.addStatus = true
                        }
                    }
                })

            }


        },
        // 子弹框取消
        cancel1() {
            this.open1 = false
        },
        // 弹框取消
        cancel() {
            this.open = false
        },
        // 编辑弹框
        edit() {
            this.title = '编辑'
            this.open = true
            this.form = this.info1
        },
        // 编辑子弹框
        childEdit() {
            this.title1 = '编辑'
            this.open1 = true
            // this.form1 = this.info2
            planinfoInfo(this.userIds).then((res)=>{
                console.log(res,22222222222222)
                if(res.code==200){
                    this.tableData=JSON.parse(res.data.detailJson)
                }
                
            })
            // this.tableData = this.userList
        },
        // 删除弹框
        delet() {
            this.$confirm('确定删除数据吗?', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                delConfig(this.userIds);

            })
                .then(() => {
                    setTimeout(()=>{
                        this.getPlanList();
                    },200)
                    
                    this.$modal.msgSuccess("删除成功");
                }).catch(() => {
                    console.log('cuole ')
                });
        },
        // 删除子弹框
        childDelet() {
            this.$modal
                .confirm('确定删除数据吗？')
                .then(function () {
                    return delUser(this.info2.id);
                })
                .then(() => {
                    this.getPlanList();
                    this.$modal.msgSuccess("删除成功");
                })
                .catch(() => { });
        }
    }
}
</script>
<style scoped lang="scss">
.box {
    margin: 0 10px 0 10px;

    .box-card {
        margin-top: 20px;

        .title_box {
            width: 100%;
            border-bottom: 1px solid #ccc;
            display: flex;
            justify-content: space-between;
            align-item: center;
            margin-bottom: 10px;
            height: 30px;
            line-height: 30px;

        }

        .title_box_value {
            width: 100%;
            height: 30px;
            line-height: 30px;
            margin: 15px 0px;
            padding-left: 10px;
            border-radius: 5px;
            cursor: pointer
        }

        .title_box_value_color {
            background-color: #cccccc40
        }
    }
}
</style>